<script setup lang='ts'>
import { onMounted, reactive, ref } from "vue"
let searchVal = ref('')
import { queryAccountAll, addAccount } from "@/api/power/account.ts"
onMounted(() => {
    data.getList()
})
// 弹窗相关的
let dialogObject = reactive({
    assigningRolesView: false,
    editView: false,
    dialogTitle: '',
    addOrEdit: (value: string) => {
        dialogObject.dialogTitle = value
        dialogObject.editView = true
    },
    // 用于存放编辑及添加的用户的信息
    accountInfo: {
        userName: '',
        accountName: '',
        roleName: ''
    },
    submitEdit: () => {
        console.log('====', dialogObject.accountInfo);
        addAccount(dialogObject.accountInfo).then(res => {
            console.log('添加是否成功', res);
            data.getList()
            dialogObject.editView = false
        })
    }
})
let data = reactive({
    tableData: [],
    getList: () => {
        queryAccountAll().then(res => {
            console.log('ressss', res);
            data.tableData = res.data
            console.log("tableDatatableDatatableDatatableData", data.tableData);
        })
    }
})
const submitRoles = () => {
    dialogObject.assigningRolesView = false
}
const assigningRoles = () => {
    dialogObject.assigningRolesView = true
}
const handleCloseRoles = () => {

}
const handleSelectionChange = () => {

}

</script>
 
<template>
    <div class="search">
        <el-input v-model="searchVal" style="width: 30%;" placeholder="搜索用户" />
        <el-button type="primary">搜索</el-button>
    </div>
    <div class="content">
        <el-button type="primary" @click="dialogObject.addOrEdit('add')">添加</el-button>
        <el-button type="danger" disabled>批量删除</el-button>
        <el-table ref="multipleTableRef" :data="data.tableData" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="#" width="120">
                1
            </el-table-column>
            <el-table-column property="userName" label="用户名字" width="120" align="center" />
            <el-table-column property="accountName" label="用户名称" show-overflow-tooltip align="center" />
            <el-table-column property="roleName" label="用户角色" show-overflow-tooltip align="center" />
            <el-table-column property="createdAt" label="创建时间" show-overflow-tooltip align="center" />
            <el-table-column property="updatedAt" label="更新时间" show-overflow-tooltip align="center" />
            <el-table-column label="操作" width="280px" align="center">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="assigningRoles">分配角色</el-button>
                    <el-button size="small" type="primary" @click="dialogObject.addOrEdit('edit')">编辑</el-button>
                    <el-popconfirm title="是否确认删除？" :hide-after=50>
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 弹窗区 -->
    <!-- 分配角色 -->
    <el-dialog v-model="dialogObject.assigningRolesView" title="Tips" width="30%" :before-close="handleCloseRoles">
        <span>This is a message</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="submitRoles">确定</el-button>
                <el-button type="primary" @click="dialogObject.assigningRolesView = false">
                    取消
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 编辑和添加弹窗 -->
    <el-dialog v-model="dialogObject.editView" :title="dialogObject.dialogTitle == 'add' ? '添加用户' : '编辑用户'" width="30%">
        <!-- 添加用户 -->
        <el-form :inline="true" :model="dialogObject.accountInfo" class="demo-form-inline">
            <el-form-item label="用户姓名">
                <el-input v-model="dialogObject.accountInfo.userName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="用户名称">
                <el-input v-model="dialogObject.accountInfo.accountName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="角色名称">
                <el-input v-model="dialogObject.accountInfo.roleName" placeholder="请输入" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogObject.submitEdit" type="primary">确定</el-button>
                <el-button @click="dialogObject.assigningRolesView = false">
                    取消
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
 
<style scoped>
.search {
    background-color: #fff;
    padding: 20px;
}

.content {
    margin-top: 10px;
    padding: 20px;
    background-color: #fff;
}

.pagination {
    margin-top: 30px;
}
</style>